<template>
	<div class="page">
		<v-front-header></v-front-header>
		<div id="nav" style="margin-bottom:10px;">
			<el-row :gutter="10" style="text-align: center;">
				<el-col :span="4">
					<div>
						<el-button type="text" class="button">网站首页</el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div>
						<el-button type="text" class="button">新闻动态</el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div>
						<el-button type="text" class="button">院系设置</el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div>
						<el-button type="text" class="button">教学教育</el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div>
						<el-button type="text" class="button">文化生活</el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div>
						<el-button type="text" class="button">联系我们</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
		<div id="pic">
			<el-carousel indicator-position="outside" height="500px">
				<el-carousel-item v-for="item in imgList" :key="item.index">
					<img ref="image" style="width:100%;height:500px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" :src="item.url" alt="轮播图" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<div id="importance">
			<el-row :gutter="20" style="margin-left:10px;">
				<el-col :span="8">
					<div>
						<el-tooltip class="item" effect="dark" content="点击查看所有校内综合新闻" placement="top-start" style="margin-bottom:10px;">
							<el-button type="text">
								<h2>综合新闻</h2>
							</el-button>
						</el-tooltip>
						<ul>
							<li>
								<el-link @click="toNewsDetail(news[0].news_id)" target="_blank">{{news[0].news_title}}</el-link>
							</li>
							<li>
								<el-link @click="toNewsDetail(news[1].news_id)" target="_blank">{{news[1].news_title}}</el-link>
							</li>
							<li>
								<el-link @click="toNewsDetail(news[2].news_id)" target="_blank">{{news[2].news_title}}</el-link>
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-tooltip class="item" effect="dark" content="点击查看所有校内学术、学者、学生新闻" placement="top-start" style="margin-bottom:10px;">
							<el-button type="text">
								<h2>学术 · 学者 · 学生</h2>
							</el-button>
						</el-tooltip>
						<ul>
							<li>
								<el-link @click="toNewsDetail(news[3].news_id)" target="_blank">{{news[3].news_title}}</el-link>
							</li>
							<li>
								<el-link @click="toNewsDetail(news[4].news_id)" target="_blank">{{news[4].news_title}}</el-link>
							</li>
							<li>
								<el-link @click="toNewsDetail(news[5].news_id)" target="_blank">{{news[5].news_title}}</el-link>
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-tooltip class="item" effect="dark" content="点击查看所有校内媒体新闻" placement="top-start" style="margin-bottom:10px;">
							<el-button type="text">
								<h2>媒体湖大</h2>
							</el-button>
						</el-tooltip>
						<ul>
							<li>
								<el-link @click="toNewsDetail(news[6].news_id)" target="_blank">{{news[6].news_title}}</el-link>
							</li>
							<li>
								<el-link @click="toNewsDetail(news[7].news_id)" target="_blank">{{news[7].news_title}}</el-link>
							</li>
							<li>
								<el-link @click="toNewsDetail(news[8].news_id)" target="_blank">{{news[8].news_title}}</el-link>
							</li>
						</ul>
					</div>
				</el-col>
			</el-row>
		</div>
		<div id="new" style="margin-top: 10px;">
			<el-tooltip class="item" effect="dark" content="点击查看所有校内最热开设的课程" placement="top-start" style="margin-left:20px;">
				<el-button type="text" @click="toHot">
					<h2>最热课程</h2>
				</el-button>
			</el-tooltip>
			<div class="new-course" style="margin-left:30px;">
				<el-row :gutter="20" class="block">
					<div v-for="hotCourse in hotCourses" :key="hotCourse">
						<el-col :span="4">
							<el-image @click="toDetail(hotCourse.course_id)" style="width: 100px; height: 100px" :src="hotCourse.image_url"></el-image>
							<p>{{ hotCourse.course_name }}</p>
						</el-col>
					</div>
				</el-row>
			</div>
		</div>
		<div id="all" style="margin-top: 10px;">
			<el-tooltip class="item" effect="dark" content="点击查看所有校内所有开设的课程" placement="top-start" style="margin-left:20px;">
				<el-button type="text" @click="toNew">
					<h2>全部课程</h2>
				</el-button>
			</el-tooltip>
			<div class="all-course" style="margin-left:30px;">
				<el-row :gutter="20" class="block">
					<div v-for="allCourse in allCourses" :key="allCourse">
						<el-col :span="4">
							<el-image @click="toDetail(allCourse.course_id)" style="width: 100px; height: 100px" :src="allCourse.image_url"></el-image>
							<p>{{ allCourse.course_name }}</p>
						</el-col>
					</div>
				</el-row>
			</div>
		</div>
		<v-front-bottom></v-front-bottom>
	</div>
</template>

<script>
	import {
		fetchData
	} from '../../api/index';
	import {
		getRequest
	} from '../../api/index';
	import {
		postRequest
	} from '../../api/index';
	import vFrontHeader from '../common/FrontHeader';
	import vFrontBottom from '../common/FrontBottom';
	import {
		mavonEditor
	} from 'mavon-editor'
	export default {
		name: 'Index',
		components: {},
		data: function() {
			return {
				imgList: [{
						id: 0,
						url: require('../../assets/img/001.jpg')
					},
					{
						id: 1,
						url: require('../../assets/img/002.jpg')
					},
					{
						id: 2,
						url: require('../../assets/img/003.jpg')
					},
					{
						id: 3,
						url: require('../../assets/img/004.jpg')
					},
					{
						id: 4,
						url: require('../../assets/img/005.jpg')
					}
				],
				query: {
					pageSize: 6,
					current: 1
				},
				hotCourses: [],
				allCourses: [],
				news: null
			};
		},
		components: {
			vFrontHeader,
			vFrontBottom,
		},
		created() {
			this.getHotCoursesData();
			this.getAllCoursesData();
			this.getNews()
		},
		methods: {
			getNews() {
				getRequest("/public/news/getall", {
					itemsofpage: 9,
					current_page: 1
				}).then(res => {
					if (res.code == 200) {
						console.log("I've got them!")
						this.news = res.data.news
					} else {
						this.$message.error("获取新闻信息失败!");
					}
				});
			},
			getHotCoursesData() {
				// TODO 接口请求
				getRequest('/public/course/gethot', {
					itemsofpage: this.query.pageSize
				}).then(res => {
					console.log('热门课程接口');
					this.hotCourses = res.data;
					console.log(this.hotCourses);
				});
			},
			getAllCoursesData() {
				// TODO 接口请求
				getRequest('/public/course/getall', {
					itemsofpage: this.query.pageSize,
					current_page: this.query.current
				}).then(res => {
					console.log('所有课程接口');
					this.allCourses = res.data.courses;
					console.log(this.allCourses);
				});
			},
			toHot() {
				this.$router.push('/courses');
			},
			toNew() {
				this.$router.push('/courses');
			},
			toDetail(course_id) {
				this.$router.push('/courses/detail?course_id=' + course_id);
			},
			toNewsDetail(news_id) {
				console.log("news_id:", news_id)
				this.$router.push('/news/detail?news_id=' + news_id);
			}
		}
	};
</script>
<style>
	html,
	#app {
		overflow-x: hidden;
		overflow-y: auto;
	}

	body {
		/* overflow: auto; */
		/* overflow-x: hidden; */
	}

	.el-scrollbar {
		/* height: 100%; */
	}

	.el-scrollbar__wrap {
		/* overflow: scroll; */
		/* overflow-x: auto; */
		/* overflow-y: auto; */
	}

	ul {
		list-style: none;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}
</style>
